<template>
  <div class="bill-card ver-layout">
    <div class="top-company-logo">昊源天然气</div>
    <div class="center-company-title hor-layout-center-all">
      <div class="bill-number" style="visibility: hidden">0003319</div>
      <div class="center-company-name">呼和浩特市昊源天然气有限责任公司</div>
      <div class="bill-number">0003319</div>
    </div>
    <div class="center-bill-title">供货气量交验单</div>
    <!--  第一行数据    -->
    <div class="bill-input-line1 hor-layout-side-center">
      <div class="hor-layout-center">
        <div>单据号：</div>
        <inputer v-model="tableData.djh"></inputer>
      </div>
      <div class="hor-layout-center">
        <div>日期：</div>
        <inputer v-model="tableData.date" :clearable="false" type="date" width="150px"></inputer>
      </div>
      <div class="hor-layout-center">
        <div>时间：</div>
        <inputer v-model="tableData.time"></inputer>
      </div>
    </div>
    <!--  第二行数据    -->
    <table border="1" cellspacing="0">
      <tr>
        <td colspan="1" class="label">购气单位</td>
        <td colspan="4">
          <selector bill-type="company" v-model="tableData.buyCompany"></selector>
        </td>
      </tr>
      <tr>
        <td colspan="1" class="label">牵引车牌号</td>
        <td colspan="1">
          <selector bill-type="busNum" v-model="tableData.qyCarNumber"></selector>
        </td>
        <td colspan="1" class="label">长管拖车牌号</td>
        <td colspan="1">
          <selector bill-type="busNum" v-model="tableData.longTubeCarNumber"></selector>
        </td>
      </tr>
      <tr>
        <td class="label">司机</td>
        <td>
          <inputer v-model="tableData.driver"></inputer>
        </td>
        <td class="label">供气量(NM³)</td>
        <td>
          <inputer v-model="tableData.gasCount"></inputer>
        </td>
      </tr>
      <tr>
        <td class="label">押运员</td>
        <td>
          <inputer v-model="tableData.supercargo"></inputer>
        </td>
        <td class="label">类 型</td>
        <td>
          <inputer v-model="tableData.goodsType"></inputer>
        </td>
      </tr>
      <tr class="remark">
        <td rowspan="2" class="label">备 注</td>
        <td rowspan="2" colspan="4">
          <inputer v-model="tableData.remarks" type="textarea"></inputer>
        </td>
      </tr>
    </table>    <!--  第三行数据    -->
    <!--  第三行数据    -->
    <div class="bill-input-line3 hor-layout-center">
      <div class="hor-layout-center" style="flex: 3">
        <div>开票人：</div>
        <selector bill-type="user" v-model="tableData.billDrawer"></selector>
      </div>
      <div class="hor-layout-center" style="flex: 2">
        <div>认结人：</div>
        <inputer v-model="tableData.subscriber"></inputer>
      </div>
    </div>
    <div class="bottom-line"></div>
    <div class="hor-layout bottom-hint">
      <div class="hint-item">
        <span>备注：</span>
        第一联（白色）：生成运行部存
      </div>
      <div class="hint-item">第二联（粉色）：财务管理部存</div>
    </div>
    <div class="hor-layout bottom-hint">
      <div class="hint-item">
        <span style="visibility: hidden">备注：</span>
        第三联（蓝色）: 客户联1
      </div>
      <div class="hint-item">第四联 (黄色）：客户联2
        <span style="margin-left: 15px">第五联（绿色）：客户联3</span>
      </div>
    </div>
  </div>
</template>

<script>
import Selector from "./selector";
import Inputer from "./inputer";

export default {
  name: "billTable",
  components: {
    Selector,
    Inputer,
  },
  props: {
    value: {}
  },
  data() {
    return {
      tableData: {
        djh: '',
        date: '',
        time: '',
        buyCompany: "",
        qyCarNumber: "",
        longTubeCarNumber: "",
        driver: '',
        gasCount: '',
        supercargo: '',
        goodsType: 'CNG',
        remarks: '',
        billDrawer: '',
        subscriber: '',
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$emit('input', false)
          Object.keys(this.tableData).forEach(key => {
            this.tableData[key] = ''
          })
        }
      }
    }
  },
  beforeMount() {
    let printData = this.$store.state.printData
    if (printData) this.tableData = printData
  },
  beforeDestroy() {
    this.$store.commit("setPrintData", this.tableData)
  },
}
</script>

<style scoped>
.bill-card {
  font-family: PingFang SC;
  font-size: 1rem;
  /*width: calc(98% - 80 * 2px);*/
  /*margin: auto;*/
  /*margin-top: 20px;*/
  padding: 3rem 8rem;
  background: #87976a;
}

.top-company-logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.center-company-title {
  position: relative;
  margin-top: 2rem;
  font-size: 1.4rem;
  width: 100%;
  text-align: center;
}

.center-company-name {
  margin: 0px 15px;
}

.bill-number {
  color: darkred;
}

.center-bill-title {
  margin-top: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.bill-input-line1 {
  margin-top: 3rem;
  font-size: 1rem;
  padding: 5px 0px;
}

table {
  margin-top: 8px;
  margin-bottom: 8px;
}

table > tr {
  height: 70px;
}

table > tr.remark {
  height: calc(70 * 2px);
}

td.label {
  text-align: center;
}

td {
  letter-spacing: 1.2px;
}

.bill-input-line3 {
  font-size: 1rem;
  padding: 5px 0px;
  margin-bottom: 20px;
}

.bottom-line {
  font-size: 1rem;
  margin-left: -40px;
  width: calc(100% + 40 * 2px);
  height: 2px;
  background: #444;
  margin-bottom: 5px;
}

.bottom-hint {
  margin-top: 5px;
}

.hint-item {
  flex: 1;
  font-size: 1rem;
  letter-spacing: 0.2rem;
}

@media print {
  .bill-card {
    font-size: 15px;
    padding: 31px 80px;
  }

  .top-company-logo {
    font-size: 18px;
  }

  .center-company-title {
    margin-top: 20px;
    font-size: 17px;
  }

  .center-company-name {
    margin: 0px 15px;
  }

  .bill-number {
    color: darkred;
  }

  .center-bill-title {
    margin-top: 16px;
    font-size: 18px;
  }

  .bill-input-line1 {
    margin-top: 30px;
    font-size: 15px;
    padding: 5px 0px;
  }

  table {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  table > tr {
    height: 70px;
  }

  table > tr.remark {
    height: calc(70 * 2px);
  }

  td.label {
    text-align: center;
  }

  td {
    letter-spacing: 1.2px;
  }

  .bill-input-line3 {
    font-size: 15px;
    padding: 5px 0px;
    margin-bottom: 20px;
  }

  .bottom-line {
    font-size: 15px;
    margin-left: -40px;
    width: calc(100% + 40 * 2px);
    height: 2px;
    margin-bottom: 5px;
  }

  .bottom-hint {
    margin-top: 10px;
  }

  .hint-item {
    flex: 1;
    font-size: 15px;
    letter-spacing: 2px;
  }
}
</style>
